<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/postprocessing/ShaderPass.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
    uniform sampler2D tDiffuse;
    uniform vec2 resolution;

    void main() {
        vec2 texelSize = 1.0 / resolution;
        vec4 color = texture2D(tDiffuse, gl_FragCoord.xy / resolution);

        // 通过在像素周围采样来创建泛光效果
        vec4 bloomColor = vec4(0.0);
        for (float i = -4.0; i <= 4.0; i++) {
            for (float j = -4.0; j <= 4.0; j++) {
                bloomColor += texture2D(tDiffuse, (gl_FragCoord.xy + vec2(i, j)) / resolution);
            }
        }

        // 结合原始颜色和泛光颜色
        gl_FragColor = color + bloomColor / 81.0;
    }
</script>
<script>
    // 创建场景
    var scene = new THREE.Scene();

    // 创建相机
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建一个立方体作为示例模型
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 创建泛光效果
    var renderScene = new THREE.RenderPass(scene, camera);

    // 自定义泛光着色器
    var bloomShader = {
        uniforms: {
            "tDiffuse": { value: null },
            "resolution": { value: new THREE.Vector2(window.innerWidth, window.innerHeight) }
        },
        vertexShader: document.getElementById('vertexShader').text,
        fragmentShader: document.getElementById('fragmentShader').text
    };

    var bloomPass = new THREE.ShaderPass(bloomShader);

    var composer = new THREE.EffectComposer(renderer);
    composer.addPass(renderScene);
    composer.addPass(bloomPass);

    var finalPass = new THREE.ShaderPass(THREE.CopyShader);
    finalPass.renderToScreen = true;
    composer.addPass(finalPass);

    // 渲染循环
    function render() {
        requestAnimationFrame(render);

        // 旋转立方体示例模型
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        // 渲染场景至EffectComposer
        composer.render();
    }

    render();


</script>
</body>
</html>
